<template>
  <div class="toggler flex items-center" @click="changeStatus">
    <div :class="toggleStyle.class">
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'ObToggle',
  props: ['status'],
  emits: ['changeStatus'],
  setup(props, { emit }) {
    let { status } = toRefs(props)
    onMounted(() => {
      changeTransform()
    })
    let toggleStyle = reactive({
      class: '',
      background: '#6e40c9'
    })
    let toggleStatus = status.value
    const changeStatus = () => {
      toggleStatus = !toggleStatus
      changeTransform()
      emit('changeStatus', toggleStatus)
    }
    const changeTransform = () => {
      toggleStyle.class = toggleStatus ? 'night' : 'sun'
    }
    return {
      toggleStyle,
      changeStatus
    }
  }
})
</script>

<style lang="scss" scoped>
.toggler {
  @apply relative;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  transition: background-color 250ms ease;
}
.sun::before,.night::before{
  font-family: 'iconfont';
  font-size: 1.35rem;
  vertical-align: middle;
}
.sun::before{
  content: "\e61e";
}
.night::before{
  content: "\e60e";
}
</style>
